/*
 * @Author: 周鹏飞
 * @Date: 2021-06-12 09:14:45
 * @LastEditors: 周鹏飞
 * @LastEditTime: 2021-06-16 14:46:27
 * @Description: file content
 */
function getMonList(data, state) {
  if (data.length != 0) {
    vm.polymerizationemphasiscameraList = [];

    for (let [key, val] of Object.entries(data)) {
      // 位置
      var point = new BMap.Point(val.lng, val.lat)
      // 创建监控图标
      var myIcon = new BMap.Icon("./images/jk/jk-c.png", new BMap.Size(30, 30));
      // 点位
      var marker = new BMap.Marker(point, { icon: myIcon });
      // 覆盖物标识
      marker.init = 'monitoring'
      vm.map.addOverlay(marker)

      var content = `
        <div class="MonitoringSty monbackingss">
          <div class="MonitoringSty-title">监控预览</div>
          <span>  地点: ${val.name}</span>
          <div class="MonitoringSty-video">
            <iframe id="child" src="./src/web3.0/cn/demo.html?ip=${val.ip}&username=${val.username}&password=${val.password}&port=${val.port}&channel=${val.channle}" width="100%" height="100%" frameborder=0></iframe>
          </div >

          <div class="controlVideo">
            <p onclick="deliver('top')" class="yxtop"></p>
            <p onclick="deliver('bottom')" class="yxbottom"></p>
            <p onclick="deliver('left')" class="yxleft"></p>
            <p onclick="deliver('right')" class="yxright"></p>

            <p onclick="deliver('tl')" class="yxtl"></p>
            <p onclick="deliver('tr')" class="yxtr"></p>
            <p onclick="deliver('bl')" class="yxbl"></p>
            <p onclick="deliver('br')" class="yxbr"></p>
          </div>

          <div class="CameraVariation">
            <div onclick="deliver('big')" class="CameraVariation_big">
              <img src="./images/jk/big.png" />
            </div>
            <div onclick="deliver('small')" class="CameraVariation_small">
              <img src="./images/jk/small.png" />
            </div>
          </div>

        </div >
        `

      addClickHandler(content, marker, 'monitoring') // 监控信息窗口

      // 标签创建
      var name = `
            <div style='width: auto; height: 22px; padding: 2px 5px; line-height: 22px; text-align: center;'>
              ${val['name']}
            </div>
          `
      var Distance = val['name'].length * 8
      var opts = {
        position: point,    // 指定文本标注所在的地理位置
        offset: new BMap.Size(-Distance, 20)    //设置文本偏移量
      }
      let label = new BMap.Label(name, opts);  // 创建文本标注对象
      label.init = "monitoring"
      label.setStyle({
        color: "#000",       //文本颜色
        fontSize: "14px",
        lineHeight: "24px",
        fontFamily: "微软雅黑",
        border: "0",
        borderRadius: '4px'
      });
      vm.map.addOverlay(label);

      // 聚合
      vm.polymerizationemphasiscameraList.push(marker)
    }

    vm.polymerizationemphasiscamera = new BMapLib.MarkerClusterer(vm.map, {
      markers: vm.polymerizationemphasiscameraList,
      styles: [{
        url: './images/jk/cs.png',
        size: new BMap.Size(36, 36),
        color: 'pink',
        textSize: 20,
        textColor: 'red'
      }]
    });
    // 设置最大缩放级别
    vm.polymerizationemphasiscamera.setMaxZoom(11);
  }
}
function deliver(state) {

  let Node = document.getElementById('child');
  Node.contentWindow.postMessage(state, Node.src)
}
